<template>
  <div class="mobile clearfix">
    <MobileHeader />

    <div class="clearfix con-width-1200">
      <div class="public-title clearfix pos-rel">
        <h2 class="pos-rel course">Detail</h2>
        <h1 class="">{{ date1.xingm }}</h1>
      </div>
      <!-- <a href="javascript:void()" @click="$router.go(-1)" class="fxr return">返回</a> -->
      <div class="clear h10"></div>
      <div class="content-detail clearfix">
        <!-- <img class="img" src="http://47.104.69.11:9000/youamyy/jeditor/杜娟_1594275409647.jpg" alt="">-->
        <img class="img" :src="date1.toux" />
        <div class="text-box">
          <div class="dorname">
            <div class="title2">{{ date1.jianj }}</div>
            <div class="title2">擅长 : {{ date1.shanc }}</div>
          </div>
          <div class="text">
            <p>{{ date1.gongzjl }}</p>
          </div>
        </div>
        <div class="clear"></div>
        <div class="part3">
          <div class="title1">详细介绍</div>
          <div class="desc">
            <p style="text-indent:2em;" v-html="date1.xiangxjs">
            </p>
          </div>
        </div>
      </div>
      <div class="r-top rad5" @click="$router.go(-1)">
        <i class="iconfont icon-fanhuidingbu"></i>
        <a>返回上级</a>
      </div>
    </div>

    <MobileFooter />
  </div>
</template>

<script>
import MobileHeader from './MobileHeader.vue'
import MobileFooter from "./MobileFooter";

// import BackToTop from './BackToTop'
import _http from "../httpService";
// import pdf from "vue-pdf";
export default {
  name: "Detail",
  props: {
    msg: String,
  },
  components: {
    MobileHeader,
    MobileFooter
  },
  data() {
    return {
      myBackToTopStyle: {
        right: "100px",
        bottom: "150px",
        width: "40px",
        height: "40px",
        "border-radius": "20px",
        "line-height": "40px",
        background: "#fff",
      },
      attachment: null,
      html: null,
      article: null,
      pdf_loading_progress: 0.0,
      date1: {},
    };
  },
  created() {
    _http.get("/zhuanjjsXq/zhuanjjsXq/queryByIdSSZJ?id=" + this.$route.params.id)
      .then((resp) => {
        if (resp.data.success) {
          this.date1 = resp.data.result;
        } else this.html = "<h1>文章正在读取中...</h1>";
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));
  },
  methods: {
    progress(number) {
      this.pdf_loading_progress = number;
    },
    backToTop() {
      let distanceY = window.pageYOffset;
      let i = 0;
      this.interval = setInterval(() => {
        let next = Math.floor(
          this.easeInOutQuad(10 * i, distanceY, -distanceY, 500)
        );
        if (next <= this.backPosition) {
          window.scrollTo(0, this.backPosition);
          clearInterval(this.interval);
        } else {
          window.scrollTo(0, next);
        }
        i++;
      }, 17);
    },
  },

  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route() {
      _http.get("/zhuanjjsXq/zhuanjjsXq/queryByIdSSZJ?id=" + this.$route.params.id)
        .then((resp) => {
          if (resp.data.success) {
            this.date1 = resp.data.result;
          } else this.html = "<h1>文章正在读取中...</h1>";
        })
        .catch((error) => console.log(error))
        .finally(() => (this.loading = false));
    },
    immediate: true,
  },
};
</script>

<style>
@import "../assets/css/public.css";

.mobile a.return {
  font: normal 12px/30px "Microsoft YaHei";
  color: #0fb4b6;
}
.mobile  .public-title .catage{
  margin:15px 0px 10px 20px;
  font-size:14px;
  height:30px;
  line-height: 30px;
  float: left;
}
.mobile .public-title{
  margin:0px;
  height:120px;
}
.mobile .list-block,.mobile .con-width-1200, .commen {
  width: 100% !important;
}
.mobile .r-top {
  cursor: pointer;
  color: #0fb4b6;
  text-align: center;
  margin-left: 580px;
  background: rgba(239, 252, 248, 0.99);
  padding: 10px;
  font-size: 16px;
  margin: 40px 0px 20px 20px;
}

.mobile a.return:hover {
  color: #753f37;
}

.mobile .mobile .showHtml {
  border: 1px solid #d6e2df;
  background: #fffefc;
  padding: 30px 22px;
  text-align: left;
}

.mobile .content-detail {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

.mobile .content-detail .img {
  width: 250px;
  margin:0px auto;
}

.mobile .content-detail .text-box {
  margin:20px;
  text-align: left;
}

.content-detail .title1 {
  font-size: 30px;
  color: #333333;
}

.content-detail .title1 .pubc-more {
  width: auto;
  padding: 0 15px;
}

.mobile .content-detail .title2 {
  font-size: 18px;
  color: #474747;
  margin-top: 20px;
  line-height: 1.9;
}

.mobile .content-detail .dorname {
  border-bottom: 1px dashed #ddd;
  padding-bottom: 0px;
  margin-bottom: 5px;
  padding-top: 0px;
}

.mobile .content-detail .text {
  font-size: 14px;
  color: #333333;
  line-height: 22px;
}

.mobile .content-detail .text p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 26px;
}

.mobile .content-detail {
  padding-top: 20px;
}

.mobile .content-detail .part3 {
  padding: 20px;
  text-align: left;
}

.mobile .content-detail .part3 .title1 {
  font-size: 24px;
  color: #333333;
}

.mobile .content-detail .part3 .desc {
  font-size: 14px;
  color: #333333;
  line-height: 26px;
  padding-top: 26px;
}
</style>
